<template>
    <div>
        <i-table border stripe  :columns="format" :data="show_list" height="760">
            <!-- <template slot-scope="{ row, index }" slot="action">
                <Button type="error" style="margin-bottom: 5px"  @click="del_xx(index)">删除</Button>
            </template> -->
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
    </div>
</template>
<script>

import { public_detail_list } from  '@/api'
import { post } from '@/api/http'
import { show_simple_page,colors,get_placement } from '@/common/util' 


export default {
    data() {
        return {
            format: [
                {
                    title: '服务',key: 'service'
                },
                {
                    title: '批次ID',key: 'release_id'
                },
                {
                    title: '项目/服务',key: 'project',
                    render:(h,params)=>{
                        let project = params.row.project
                        let service = params.row.service
                        let value=project+"/"+service
                        return h('span',value)
                    }
                },
                {
                    title: '发布类型',key: 'public_type',
                    render:(h,params)=>{
                        let release_type = params.row.public_type
                        let value=null
                        if(release_type==1){
                            value='蓝绿部署'
                        }else if (release_type==2){
                            value='灰度发布'
                        }else if (release_type==3){
                            value='滚动更新'
                        }
                        return h('span',value)
                    }
                },
                {
                    title: '发布状态',key: 'status',
                    render:(h,params)=>{
                        let release_status = params.row.status
                        if(release_status==1){
                            return h('span',{
                                style: {
                                    color: colors['yellow'],
                                }
                            },'创建')
                        }else if (release_status==21 || release_status==22 ){
                            let value ='蓝绿部署'
                            if (release_status==21){
                                value= '新版接管流量'
                            }else if(release_status==22){
                                value= '旧版接管流量'
                            }
                            return h('span',{
                                style: {
                                    color: colors['yellow'],
                                }
                            },value)
                        }else if (release_status==31||release_status==32||release_status==33){
                            let value ='灰度部署中'
                            if(release_status==31){
                                value ='灰度部署中'
                            }else if (release_status==32){
                                value= '新版接管流量'
                            }else if(release_status==33){
                                value= '旧版接管流量'
                            }
                            return h('span',{
                                style: {
                                    color: colors['yellow'],
                                }
                            },value)
                        }else if (release_status==99){
                            return h('span',{
                                style: {
                                    color: colors['green'],
                                }
                            },'发布完成')
                        }
                    }
                },
                {
                    title: '版本/流量权重',key: 'new_version',
                    render:(h,params)=>{
                        let new_version = params.row.new_version
                        let old_version = params.row.old_version
                        let new_weight = params.row.new_weight
                        let old_weight = params.row.old_weight

                        let v1 = "新版:" +new_version+" 权重："+new_weight
                        let v2 = "旧版:" +old_version+" 权重："+old_weight
                        let value = v1 +"\n"+v2
                        return h('pre',value)
                    }

                },
                {
                    title: '灰度路由匹配项',key: 'match',
                    render:(h,params)=>{
                        let match = params.row.match
                        // console.log(typeof match,JSON.stringify(match))
                        if(match==null || match==''){
                            return h('span','无')
                        }else{
                            let placement = get_placement(params)
                            let my_matcher = this.match_convert(match)
                            let value = JSON.stringify(my_matcher,undefined,4)
                            return h('Poptip', {props:{'trigger':'hover','width':400,'word-wrap':true,'transfer':true,'placement':placement,content:value}},[
                                    h('a', '显示')
                            ]);
                        }
                    }
                },
                // {
                //     title: '灰度流量策略',key: 'gray_trffic_type',
                // },
                {
                    title: '创建时间',key: 'create_time'
                },
                {
                    title: '更新时间',key: 'update_time'
                },
                // {
                //     title: '操作',slot: 'action',width: 100,align: 'center'
                // }
            ],
            // 分页
            total_list: [],
            show_list: [],
            total: 0,
            pageSize: 50,
        }
    },
    methods: {
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        refresh() {
            post(public_detail_list).then(response =>{
                show_simple_page(this,response)
            })
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style>
    pre{
        white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space:normal!important;
    }
</style>